/**
* @description: 现场验收-核查更新-完善光缆信息
* @author: zhaohui
* @data:2023年6月25日
* @remark:
**/
<template>
	<div class="cable-detail-wrap">
		<nav-bar class="header" back title="完善光缆信息" @goBack="goBack" />
		<!-- 光缆信息 -->
		<div class="cable-info">
			<plateTitle title="光缆信息" class="plate-title-1" />
			<view class="cable-info-container">
				<van-form ref="ruleForm" label-width="120">
					<van-field v-model="subParam.name" label="光缆名称" placeholder="请输入" required input-align="right"
						error-message-align="right" :rules="[{ required: true,trigger:'onChange', message: '' }]" />
					<van-field v-model="subParam.startName" required :rules="[{ required: true, trigger:'onSubmit'}]"
						input-align="right" clearable label="起点名称" placeholder="请选择" right-icon="arrow" disabled
						@click-right-icon="handleSelect('startName')" />
					<van-field input-align="right" disabled v-model="subParam.endName" label="终点名称"
						:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow" required
						@click-right-icon="handleSelect('endName')" />
					<van-field v-model="subParam.sequence" name="workType" input-align="right" disabled label="光缆顺序"
						:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow" required
						@click-right-icon="handleSelect('sequence')" />
					<van-field input-align="right" disabled v-model="subParam.LV" label="电压等级"
						:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow" required
						@click-right-icon="handleSelect('LV')" />
					<van-field v-model="subParam.species" input-align="right" disabled label="光缆种类" placeholder="请选择"
						right-icon="arrow" @click-right-icon="handleSelect('species')" />
					<van-field input-align="right" v-model="subParam.workContent" label="所属线路" placeholder="请选择" />
					<van-field v-model="subParam.workContent" input-align="right" label="光缆长度（Km）" placeholder="请输入" />
					<van-field input-align="right" disabled v-model="subParam.total" label="纤芯总数"
						:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow" required
						@click-right-icon="handleSelect('total')" />

				</van-form>
			</view>
			<plateTitle title="巡视信息" :isRequired="false" class="plate-title-1" />
			<!-- 巡视照片 -->
			<view class="patrol-info-container">
				<view>巡视照片</view>
				<van-divider dashed />
				<div class="image-wrap">
					<div class="image-list">
						<div class="upload-button" v-for="(imgItem, index) in files"
							:style="{'background-image': `url(${imgItem.bgImg})`}">
							<img :src="imgItem.img" alt=""  v-if="imgItem.img"
								@click.stop="imageHandle(imgItem, index, 'PREVIEW')">
						</div>
					</div>
				</div>
			</view>

			<!-- 备注 -->
			<view class="remark-info-container">
				<view>备注</view>
				<van-divider dashed />
				<div class="remark-wrap">
					<!-- :value="taskDetail.originData.fiber_exam_msg.REMARK" -->
					<textarea class="remark-text" :value="subParam.remark" v-model="subParam.remark"/>
					</textarea>
				</div>
			</view>
			<view class="cable-info-container">
				<van-cell-group>
					<van-cell v-for="(item,index) in testData" :key="index" :title="item.title" :value="item.text" />
				</van-cell-group>
			</view>

			<van-button block @click="reEdit">保存</van-button>

		</div>

		<van-popup v-model="showPopup" position="bottom">
			<van-picker :title="popupTitle" show-toolbar :columns="popupData" @confirm="confirm" value-key="title"
				@cancel="showPopup = false" :defaultIndex="defaultIndex" />
		</van-popup>
	</div>
</template>

<script>
	import config from "../../../common/config";
	import navBar from "../../../components/common/nav-bar";
	import plateTitle from '../../../components/business/plateTitle.vue';
	import {
		Dialog,
		Toast
	} from "vant";
	import {
		mapGetters
	} from "vuex";
	import {
		merge
	} from "lodash";


	// 光缆条目对应
	let map_cable = {
		"NAME": "光缆名称", //光缆名称
		"A_SITE_NAME": "起点名称", //起点名称
		"Z_SITE_NAME": "终点名称", //终点名称
		"VOLTAGE_CLASS": "电压等级", //电压等级
		"OPTICALORDER": "光缆顺序", //光缆顺序
		"FIBER_TYPE": "光缆种类", //光缆种类
		"POWER_LINE": "所属线路", //所属线路
		"LENGTH": "长度(Km)", //长度(Km)
		"LINE_NUMBER": "纤芯总数", //纤芯总数
		"RUN_STATE": "运行状态" // 运行状态
	}

	// 巡视条目对应
	let map_tour = {
		"XSJG": "巡视结果", //设备状态（1 一致  2  不存在  3  新增   4  更新）
		"TOUR_OPER_NAME": "巡视人", //巡视人姓名
		"TOUR_TIM": "巡视时间", //巡视时间
	}

	let fileTemplate = [{
			name: "EQUIPMENT.jpg",
			previewName: "设备照片",
			type: "EQUIPMENT",
			bgImg: require("../../../static/img/bg_shebei.png"),
			raw: null, // raw文件
			img: '', // 用来显示的照片
		},
		{
			name: "NAMEPLATE.jpg",
			previewName: "铭牌照片",
			type: "NAMEPLATE",
			bgImg: require("../../../static/img/bg_mingpai.png"),
			raw: null, // raw文件
			img: '', // 用来显示的照片
		},
		{
			name: "OTHER.jpg",
			previewName: "其他照片",
			type: "OTHER",
			bgImg: require("../../../static/img/bg_qita.png"),
			raw: null, // raw文件
			img: '', // 用来显示的照片
		},
	];

	// 已完成-纤芯列表头部统计
	let map_rate = {
		"FREE": "空余纤芯",
		"FREE_RATE": "纤芯空闲率",
		"USED": "已使用纤芯",
		"USED_RATE": "纤芯使用率"
	}

	export default {
		name: "cableDetail", // 通信光缆详情
		data() {
			return {

				taskDetail: {}, // 光缆详情
				files: {}, // 照片map
				baseUrl: "", // 基础url
				objId: '', // 巡视id
				taskId: '', // 主工单id
				isEditable: false, // 是否可重新编辑
				showPreview: false, // 图片预览
				testData: [{
					title: "巡视人",
					text: "测试"
				}, {
					title: "巡视时间",
					text: "测试"
				}],
				operation: "modify", // 默认值
				isCoincide: "不一致",
				showPicker: false,
				columns: ["一致", "不一致"],
				subParam: {
					name: "",
					startName: "",
					endName: "",
					sequence: "",
					LV: "",
					species: "",
					total: "",
					remark:""
				},
				showPopup: false,
				popupData: [],
				defaultIndex: -1,
				popupTitle: ""
			}
		},
		components: {
			navBar,
			plateTitle,
		},
		computed: {
			...mapGetters(["userData"]),
		},
		onLoad(options) {
			
		},
		onShow() {
			// this.getCableInfo();
			this.files = JSON.parse(JSON.stringify(fileTemplate));
			console.log(this.files)
		},
		methods: {
			goBack() {
				uni.navigateTo();
			},
			handleSelect(name) {
				if (name === "startName") {
					this.popupTitle = "起点名称"
					this.popupData = [{
						title: "起点名称",
						text: "测试"
					}]

					this.defaultIndex = this.getSelectIndex(this.subParam.startName)
				} else if (name === "endName") {
					this.popupTitle = "终点名称"
					this.popupData = [{
						title: "终点名称",
						text: "测试"
					}]
					this.defaultIndex = this.getSelectIndex(this.subParam.endName)
				} else if (name === "sequence") {
					this.popupTitle = "光缆顺序"
					this.popupData = [{
						title: "一",
						text: "测试"
					}]
					this.defaultIndex = this.getSelectIndex(this.subParam.sequence)
				} else if (name === "LV") {
					this.popupTitle = "电压等级"
					this.popupData = [{
							title: "110KV",
							text: "测试"
						},
						{
							title: "220KV",
							text: "测试"
						}
					]
					this.defaultIndex = this.getSelectIndex(this.subParam.LV)
				} else if (name === "species") {
					this.popupTitle = "光缆种类"
					this.popupData = [{
							title: "ADSS",
							text: "测试"
						},
						{
							title: "ADSS2",
							text: "测试"
						}
					]
					this.defaultIndex = this.getSelectIndex(this.subParam.species)
				} else if (name === "total") {
					this.popupTitle = "纤芯总数"
					this.popupData = [{
							title: "24",
							text: "测试"
						},
						{
							title: "36",
							text: "测试"
						}
					]
					this.defaultIndex = this.getSelectIndex(this.subParam.total)
				}

				this.showPopup = true
			},
			getSelectIndex(name) {
				let index = -1
				if (name) {
					index = this.defaultIndex = this.popupData.findIndex(function(val) {
						return val.title === name
					})
				}
				return index

			},
			/**
			 * @param {Object} data
			 * 弹窗确认
			 */
			confirm(data) {
				if (this.popupTitle === "起点名称") {
					this.subParam.startName = data.title
				} else if (this.popupTitle === "终点名称") {
					this.subParam.endName = data.title
				} else if (this.popupTitle === "光缆顺序") {
					this.subParam.sequence = data.title
				} else if (this.popupTitle === "电压等级") {
					this.subParam.LV = data.title
				} else if (this.popupTitle === "光缆种类") {
					this.subParam.species = data.title
				} else if (this.popupTitle === "纤芯总数") {
					this.subParam.total = data.title
				}
				this.showPopup = false
			},
			async reEdit() {
				console.log(this.subParam)
				//+图片判断
				await this.$refs.ruleForm
					.validate()
					.then(() => {

					})
					.catch(error =>{
						Toast("请完善信息")
					})
			},
			imageHandle(imgItem, imgIndex, handleType) {
				if (handleType === 'CHOOSE') {
					this.choosePhoto(imgItem, imgIndex);
				} else if (handleType === 'PREVIEW') {
					this.showPreview = true;
				} else if (handleType === 'DELETE') {
					Dialog.confirm({
							message: `是否确认删除${imgItem.previewName}`,
							confirmButtonColor: '#417adc'
						})
						.then(() => {
							this.$set(this.files, imgIndex, {
								...this.files[imgIndex],
								raw: null,
								img: ''
							})
							this.delList.includes(imgItem.type) ? null : this.delList.push(imgItem.type);
							console.log(this.delList, "delete")

						})
						.catch(() => {
							// on cancel
						})
				}
			},
			choosePhoto(imgItem, imgIndex) {
				let _this = this;
				wx.chooseImage({
					count: 3,
					sourceType: ["camera"],
					success: (chooseImageRes) => {
						wx.getLocalImgData({
							localId: chooseImageRes.localIds[0].toString(),
							success: function(res) {
								const localData = res.localData;
								let imageBase64 = '';
								if (localData.indexOf('data:image') == 0) {
									//苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
									imageBase64 = localData;
								} else {
									//此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
									//此时一个正常的base64图片路径就完美生成赋值到img的src中了
									imageBase64 = 'data:image/jpeg;base64,' + localData.replace(
										/\n/g, '');
								}

								_this.$set(_this.files, imgIndex, merge(_this.files[imgIndex], {
									raw: _this.h5_url_to_blob(imageBase64),
									img: imageBase64
								}));


								if (_this.delList.includes(imgItem.type)) {
									_this.delList = _this.delList.filter(item => {
										if (item === imgItem.type) {
											return false;
										}

										return true;
									});
								}
							}
						});
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},
			h5_url_to_blob(url) {
				let arr = url.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cable-detail-wrap {
		.header {
			position: sticky;
			top: 0;
			z-index: 9;
		}

		width: 100vw;
		min-height: 100vh;
		background-color: rgba(242, 246, 250, 1);

		.van-preview-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.van-swipe {
				width: 100%;
				height: 100%;
			}

			img {
				height: 90%;
			}
		}

		.cable-state {
			width: 100vw;
			height: px2vh(140);
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 0 px2vw(30) 0 px2vw(49);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cable-state-title {
				font-size: px2vw(42);
			}

			.cable-state-text {
				width: px2vw(220);
				height: px2vh(80);
				border-radius: px2vw(40);
				font-size: px2vw(42);
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;

				&.cable-state-on {
					color: rgba(255, 67, 85, 1);
					background-color: rgba(255, 67, 85, 0.1);
				}

				&.cable-state-off {
					color: rgba(65, 220, 131, 1);
					background-color: rgba(65, 220, 131, 0.1);
				}
			}
		}

		.cable-info-tab {
			width: calc(100% - #{px2vw(60)});
			height: px2vh(120);
			border-radius: px2vw(20);
			box-sizing: border-box;
			margin: px2vh(40) px2vw(30) px2vh(30);
			padding: 0 px2vw(10);
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;

			.info-tab-item {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(51, 51, 51, 1);
				font-size: px2vw(38);

				&.info-tab-current {
					height: px2vh(100);
					//margin-right: px2vw(10);
					border-radius: px2vw(20);
					background-color: rgba(65, 122, 220, 1);
					color: rgba(255, 255, 255, 1);
					font-weight: Bold;
				}
			}
		}

		.cable-info {
			width: calc(100% - #{px2vw(60)});
			height: 100%;
			margin: auto;
			padding-bottom: px2vh(30);
			overflow: auto;

			.plate-title-1 {
				margin-top: px2vh(30);
				margin-bottom: px2vh(27);
			}

			.cable-info-container,
			.result-info-container {
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;
			}

			.result-info-container {
				.patrol-info-container {
					font-size: px2vw(42);
					color: #666666;
					border-radius: $border-radius-base;
					overflow: hidden;
					background-color: #FFFFFF;

					.van-radio-group {
						font-size: px2vw(42);
						padding: px2vh(60) 0;
					}

					/deep/ .van-field__label {
						font-size: px2vw(42);
						width: auto;
					}
				}

				.yellow {
					/deep/.van-cell__value {
						color: #FFAD0E;
					}
				}

				.blue {
					/deep/.van-cell__value {
						color: #417ADC;
					}
				}

				.green {
					/deep/.van-cell__value {
						color: #41DC83;
					}
				}

				.red {
					/deep/ .van-cell__value {
						color: #FF4355;
					}
				}
			}

			.remark-info-container {
				padding: px2vh(70) px2vw(50);
				font-size: px2vw(42);
				color: #666666;
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;
				margin-top: px2vh(40);
				margin-bottom: px2vh(40);

				.remark-wrap {
					background-color: #FAFAFA;
					padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
					border-radius: px2vw(20);

					.remark-text {
						height: px2vh(150);
					}
				}
			}

			.patrol-info-container {
				padding: px2vh(70);
				font-size: px2vw(42);
				color: #666666;
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;

				/deep/ .van-radio {
					margin-right: px2vw(139.5)
				}

				/deep/ .van-cell {
					padding-left: 0;
				}

				.image-wrap {
					width: 100%;
					display: flex;

					img {
						width: px2vw(215);
						height: px2vw(215);
						margin-right: px2vw(40);
						border-radius: px2vw(6);
					}

					.image-list {
						width: 100%;
						display: flex;

						.upload-button {
							width: px2vw(215);
							height: px2vw(215);
							background-size: cover;
							margin-right: px2vw(40);
							position: relative;

							.delete-icon {
								position: absolute;
								top: px2vw(-20);
								right: px2vw(-20);
								width: px2vw(40);
								height: px2vw(40);
								background-color: rgba(0, 0, 0, 0.7);
								border-radius: 50%;
								color: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}
		}

		.fibre-info {
			.fibre-rate {
				width: calc(100% - #{px2vw(60)});
				//height: px2vh(140);
				border-radius: px2vw(20);
				box-sizing: border-box;
				margin: px2vh(40) px2vw(30) px2vh(30);
				background-color: #ffffff;
				overflow: hidden;

				.progress-bar {
					height: px2vh(140);
					background-color: #ffffff;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.bar-title {
						font-size: px2vw(42);
						color: rgba(65, 122, 220, 1);
						margin-left: px2vw(40);
					}

					.bar-chart {
						width: px2vw(660);
						height: px2vh(34);
						margin: 0 px2vw(27) 0 px2vw(30);
						background-color: #ECF1FB;

						.bar-chart-off {
							//width: 75%;
							height: 100%;
							background: repeating-linear-gradient(135deg, #417ADC, #417ADC #{px2vw(16)}, #B3CAF1 #{px2vw(16)}, #B3CAF1 #{px2vw(32)});
						}
					}

					.bar-text {
						font-size: px2vw(42);
						margin-right: px2vw(40);
						font-weight: bold;
						color: #7C7C7C;

						.bar-off {
							color: #417ADC;
						}
					}
				}
			}

			.fibre-rate-info {
				//margin: 0 auto px2vh(40);
				margin: 0 auto px2vh(60);
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: px2vh(54) px2vw(70);
				width: calc(100% - #{px2vw(60)});
				font-size: px2vw(40);
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;

				.info-item {
					.value {
						margin-bottom: px2vh(26);
						font-size: px2vh(54);
						font-weight: 700;
						color: #417adc;
						text-align: center;
					}

					.label {
						font-size: px2vh(36);
						font-weight: bold;
						color: #333333;
						text-align: center;
					}
				}
			}
		}

		.fibre-content-title {
			width: calc(100% - #{px2vw(80)});
			box-sizing: border-box;
			margin: px2vh(0) px2vw(40) px2vh(18);

			.condition-bar {
				display: flex;
				justify-content: center;

				.condition-item {
					height: px2vh(56);
					background-color: rgba(65, 122, 220, 0.1);
					border: #{px2vw(2)} solid rgba(65, 122, 220, 1);
					color: rgba(65, 122, 220, 1);
					border-radius: px2vw(6);
					font-size: px2vw(30);
					padding: 0 px2vw(16) 0 px2vw(19);
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 px2vw(5);

					&:last-child {
						margin-right: 0;
					}

					&.condition-item-checked {
						background-color: rgba(65, 122, 220, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}

		.fibre-pair-list {
			height: calc(100vh - #{px2vh(613)});
			overflow: auto;

			.fibre-pair-item {
				width: calc(100% - #{px2vw(60)});
				min-height: px2vh(140);
				border-radius: px2vw(20);
				box-sizing: border-box;
				margin: px2vh(40) px2vw(30) px2vh(40);
				padding: 8px 0;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.replace-index {
					margin: 0 px2vw(28) 0 px2vw(40);
					width: px2vw(64);
					height: px2vw(64);
					border-radius: 50%;
					background: radial-gradient(circle at center, #417ADC, #417ADC #{px2vw(23)}, #ffffff #{px2vw(23)}, #ffffff #{px2vw(26)}, #417ADC #{px2vw(26)}, #417ADC 100%);
					color: #ffffff;
					font-size: px2vw(36);
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;
				}


				.replace-text {
					width: px2vw(645);
					font-size: px2vw(42);
					color: #666666;
					//white-space: nowrap;
					//text-overflow: ellipsis;
					//overflow: hidden;
					//span{
					//  display: inline-block;
					//  white-space: nowrap;
					//}
					//span.loop {
					//  //animation: 10s wordsLoop linear infinite normal;
					//}
				}

				.replace-state {
					font-size: px2vw(42);
					margin-right: px2vw(39);

					&.replace-state-on {
						color: #41DC83;
					}

					&.replace-state-off {
						color: #FF4355;
					}
				}
			}
		}

		/deep/.van-button {
			margin-top: px2vh(30);
			height: px2vh(120);
			color: #fff;
			background-color: #417adc;
			border: 1px solid #417adc;
			border-radius: px2vh(60);
		}

		@keyframes wordsLoop {
			0% {
				transform: translateX(10%);
				-webkit-transform: translateX(10%);
			}

			100% {
				transform: translateX(-100%);
				-webkit-transform: translateX(-100%);
			}
		}
	}
</style>
